<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>维护记录</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
      .layui-form-label {
        width: auto !important;
      }

      .operation span {
        color: #389E0D;
      }

      .operation span:first-of-type {
        color: #1990FF;
      }

      .operation span:last-of-type {
        color: #F5222D;
      }

      .pageNav {
        margin: 0 auto;
        width: fit-content;
      }

      .pageNav a,
      .operation span {
        cursor: pointer;
        display: inline-block;
      }

      cite {
        cursor: default;
      }
    </style>
  </head>
  <body>
    <script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
    <script src="./js/jQuery.main.js"></script>

    <form class="layui-form" action="" lay-filter="data">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">搜索：</label>
          <div class="layui-input-inline" style="width: 10em !important;">
            <select name="type">
              <option value="">状态</option>
              <option value="1"></option>
              <option value="0"></option>
            </select>
          </div>
          <div class="layui-input-inline" style="width: 10em !important;">
            <select name="status">
              <option value="">状态</option>
              <option value="0">申请中</option>
              <option value="1">申请成功</option>
              <option value="2">申请失败</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <input type="text" name="projectName" class="layui-input" style="width: 8em;" placeholder="名称" value="">
        </div>
        <div class="layui-inline">
          <input type="text" name="donor" class="layui-input" style="width: 8em;" placeholder="上报人" value="">
        </div>
        <div class="layui-inline">
          <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索维护记录</button>
        </div>
      </div>
    </form>

    <table class="layui-table" lay-skin="line">
      <thead>
        <tr>
          <th style="text-align: center">机器名</th>
          <th style="text-align: center">状态</th>
          <th style="text-align: center">上报人员</th>
          <th style="text-align: center">维护时间</th>
          <th style="text-align: center">操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div style="display: flex;">
      <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      var displayStart = 1;
      var endPage = null;
      var layer = layui.layer;
      var form = null;
      var list = null;

      layui.use(['form', 'element'], function() {
        form = layui.form;

        search(1);

        form.on('submit(searchBtn)', function() {
          search(1);
          return false;
        });
        $('.fristPage').click(function() {
          search(1);
          return false;
        });
        $('.lastPage').click(function() {
          search((displayStart > 1 ? displayStart - 1 : 1));
          return false;
        });
        $('.nextPage').click(function() {
          search((displayStart < endPage ? displayStart + 1 : endPage));
          return false;
        });
        $('.endPage').click(function() {
          search(endPage);
          return false;
        })
      })

      function deleteUser(index) {
        if (!index) return false;
        $.ajax({
          url: url + '/user/delete/' + index,
          method: 'DELETE',
          success: function(res) {
            layer.msg(res.msg)
            if (res.code == 200) search();
          }
        })
      }

      function search(index) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.displayStart = index;
        $.ajax({
          url: url + '/donation-info/donateInfoList',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(data),
          success: function(res) {
            $('tbody').empty();
            displayStart = res.data.current;
            endPage = res.data.pages;
            list = res.data.records;
            for (var i = 0; i < res.data.records.length; i++) {
              $('tbody').append(
                "<tr><td>" + res.data.records[i].id + "</td><td>" + res.data.records[i].projectName +
                "</td><td>" + res.data.records[i].donor + "</td><td>" + orderStatus(res.data.records[i].status) +
                "</td><td>" + res.data.records[i].createTime.replace('T', ' ') + '</td><td>' +
                (res.data.records[i].type == 1 ? '现金' : '物资') +
                "</td><td class='operation'><span onclick='detail(" +
                res.data.records[i].id + ")'>捐献详情</span>" + ( res.data.records[i].status == 0 ? "<span onclick='review(" +
                res.data.records[i].id + ", true)'>　通过　</span><span onclick='review(" +
                res.data.records[i].id + ", false)'>不通过</span>" : '' ) + "</td></tr>"
              );
            }
            $('#page').html(displayStart)
          }
        })
      }

      function detail(id) {
        layer.open({
          type: 1,
          skin: 'layui-layer-rim',
          area: ['500px', '350px'],
          title: '捐献详情',
          content: `
              <div style="width: fit-content; margin: 10px auto;" id="content"></div>
          `,
          success: function() {
            var i = 0;
            for (; i < list.length; i++) {
              if (list[i].id == id) break;
            }
            if (list[i].responseItemListVoList[0].itemName) {
              $('#content').append(
                `
                <table class="layui-table" lay-skin="line">
                <thead>
                  <tr>
                    <th>物品名称</th>
                    <th>捐献数量</th>
                    <th>生产标准</th>
                    <th>供应厂家</th>
                  </tr>
                </thead>
                <tbody id="contentList"></tbody>
              </table>
              `
              );
            for (var m = 0; m < list[i].responseItemListVoList.length; m++) {
                $('#contentList').append(
                  "<tr><td>" + list[i].responseItemListVoList[m].itemName + "</td><td>" +
                  list[i].responseItemListVoList[m].itemAmount + "</td><td>" +
                  list[i].responseItemListVoList[m].standard + "</td><td>" +
                  list[i].responseItemListVoList[m].supplier + "</td></tr>"
                );
              }
            } else {
              $('#content').append(
                `
                <label class="layui-form-label" style="margin: 10px 0;">币种：</label>
                <div class="layui-form-mid" style="margin: 10px 0;">` +
                list[i].responseItemListVoList[0].currency +
                `</div><br><label class="layui-form-label" style="margin: 10px 0;">捐献金额：</label>
                <div class="layui-form-mid" style="margin: 10px 0;">` +
                list[i].responseItemListVoList[0].amount + `</div>
              `);
            }
          }
        });
      }

      function review(id, value) {
        $.ajax({
          url: url + '/donation-info/checkDonation',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            checkStatus: value,
            id: id
          }),
          success: function(res) {
            layer.msg(res.msg);
            if (res.code == 200) search();
          }
        })
      }
    </script>
  </body>
</html>
